<template>
	<view class="cv-transfer-panel">
		
		<view class="cv-transfer-panel-body" style="height: 415px">
			<checkbox-group @change="checkboxChange" v-if="datas.length">
				<uni-table border>
					<uni-tr class="tr-table--border">
						<uni-th >宝宝姓名</uni-th>
						<uni-th >原班级</uni-th>
						<uni-th align="center">操作</uni-th>
					</uni-tr>
					<uni-tr class="trClass" v-for="item in datas" :key="item.key">
						<uni-td>
						  <view class="item-label">{{item.label}}</view>
						</uni-td>
						<uni-td>{{ item.className }}</uni-td>
						<uni-td>
						    <view class="uni-group" v-if="item.logo" style="text-align: center;">
								<button class="uni-button" size="mini" type="primary"  @click="edit(item)">回原班</button>
						    </view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</checkbox-group>
			<view class="empty-datas" v-else>
				无数据
			</view>
		</view>
	</view>
</template>

<script>
	// import tableCheckbox from '../uni-tr/table-checkbox.vue'
	export default {
		name: 'transfer-panel',
		props: {
			datas: {
				type: Array,
				default: () => ([])
			},
			title: {
				type: String,
				default: '列表1'
			}
		},
		data(){
			return {
			// localdatas="sex"
			radio1:1,
			radiotf:false,
			sex: [{
				text: '宝贝姓名',
				value: 0
			}],
			newdata: this.datas
			}
		},
		methods: {
			edit(e){
				this.$emit('onUnSelect',e.key)
				// this.datas = this.splicefun(this.datas,e);
			    
			},
			splicefun(datas,e){
				 
			return	datas.splice(datas.indexOf(e.key), 1) // ['b']
				
			},
			
			checkboxChange(event) {
				this.$emit('onSelect', event.detail.value)
			},
			checkbox(event){
				if(event.detail.value.length==1){
					this.radiotf = true;
					let list = []
					this.datas.forEach(kl=>{
						list.push(kl.key)
					})
					this.$emit('onSelect', list)
				}else{
					this.radiotf = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tr-table--border{
		border-right: 1px #ebeef5 solid;
		background: #f9f9f9;
	}
	.cv-transfer-panel {
		flex: 45%;
		border-radius: 4px;
		border-right: 1px solid #ebeef5;
		border-bottom: 1px solid #ebeef5;
		overflow: hidden;
		background: #fff;
		display: inline-block;
		vertical-align: middle;
		max-height: 100%;
		box-sizing: border-box;
		position: relative;
	
		&-header {
			height: 60rpx;
			line-height: 60rpx;
			background: #f5f7fa;
			margin: 0;
			padding-left: 15px;
			border-bottom: 1px solid #ebeef5;
			box-sizing: border-box;
			color: #000;
		}
	
		&-body {
			padding: 6px 0;
			min-height: 250rpx;
			height: 170px;
			overflow-y: auto;
			.empty-data {
				margin: 0;
				height: 30px;
				line-height: 30px;
				padding: 6px 15px 0;
				color: #909399;
				text-align: center;
				font-size: 14px;
			}
	
			.cv-list-cell {
				display: inline-flex;
				align-items: center;
			}
	
			.item-label {
				font-size: 14px;
			}
		}
	}
	
	.trClass{
		line-height: 35px;
	}
</style>
